<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader :buttons="[]">
            <template #refreshAppend>
                <el-input v-model="filterParams.order_no" class="ml-3 w-40" placeholder="订单编号" clearable></el-input>
                <el-input v-model="filterParams.mobile" class="ml-3 w-40" placeholder="用户手机号" clearable></el-input>
                <el-input v-model="filterParams.nickname" class="ml-3 w-40" placeholder="用户名称" clearable></el-input>

                <el-button class="ml-3" @click="handleSearch('reset')"
                    ><Icon name="fa fa-refresh" class="text-current text-sm mr-1"></Icon>重置</el-button
                >
                <el-button type="primary" @click="handleSearch('search')"
                    ><Icon name="fa fa-search" class="text-white text-sm mr-1"></Icon>查询</el-button
                >
            </template>
        </TableHeader>
        <div class="bg-white mt-2 p-3">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                <el-tab-pane :label="`全部(${tabNums.onShelfTotal})`" name="first"></el-tab-pane>
                <el-tab-pane :label="`待查验(${tabNums.offShelfTotal})`" name="second"></el-tab-pane>
                <el-tab-pane :label="`待协商(${tabNums.soldOutTotal})`" name="third"></el-tab-pane>
                <el-tab-pane :label="`待支付(${tabNums.finishToatal})`" name="four"></el-tab-pane>
                <el-tab-pane :label="`已完成(${tabNums.finishToatal})`" name="four"></el-tab-pane>
            </el-tabs>
            <!-- 表格 -->
            <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
            <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
            <Table ref="tableRef">
                <template #order_goods>
                    <el-table-column label="商品信息" width="220">
                        <template #default="scope">
                            <div
                                style="display: flex; align-items: center; margin-bottom: 12px"
                                v-for="(item, key) in scope.row.order_goods"
                                :key="key"
                            >
                                <el-image
                                    style="width: 100px; height: 130px"
                                    :src="item.goods_image"
                                    :fit="item.goods_name"
                                    :preview-src-list="[item.goods_image]"
                                    hide-on-click-modal
                                    preview-teleported
                                />
                                <div style="flex: 1; margin-left: 12px">
                                    <div>{{ item.goods_name }}</div>
                                    <div>{{ item.card?.ean }}</div>
                                    <div>{{ item.card?.tags }}</div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #sku_name>
                    <el-table-column prop="title" label="商品规格" :align="'left'" style="position: relative" width="180">
                        <template #default="scope">
                            <div style="display: flex; align-items: center; height: 130px" v-for="(item, key) in scope.row.order_goods" :key="key">
                                {{ item.sku_name }}
                            </div>
                        </template>
                    </el-table-column>
                </template>

                <template #price>
                    <el-table-column label="单价" :align="'center'" width="100">
                        <template #default="scope">
                            <div style="display: flex; align-items: center; height: 130px" v-for="(item, key) in scope.row.order_goods" :key="key">
                                ￥{{ item.price }}
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #total>
                    <el-table-column prop="name" label="数量" width="80">
                        <template #default="scope">
                            <div style="display: flex; align-items: center; height: 130px" v-for="(item, key) in scope.row.order_goods" :key="key">
                                {{ item.num }}
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #oederInfo>
                    <el-table-column label="订单信息" >
                        <template #default="scope">
                            <span>{{ scope.row.member?.nickname }}</span> <span>{{ scope.row.member?.mobile }}</span
                            >&nbsp;&nbsp; <span>订单号：{{ scope.row.order_no }}</span
                            >&nbsp;&nbsp;<br /><span>下单时间：{{ scope.row.order_delivery[0]?.send_mobile }}</span
                            ><br />
                            <span>物流信息：</span><span>{{ scope.row.order_delivery[0].send_name }}</span
                            >&nbsp;&nbsp;<span>{{ scope.row.order_delivery[0].send_mobile }}</span
                            >&nbsp;&nbsp; <span>{{ scope.row.order_delivery[0].company.company_name }}</span
                            >&nbsp;&nbsp;<span>{{ scope.row.order_delivery[0].express_number }}</span
                            ><br />
                            <span>发货地址：{{ scope.row.order_delivery[0].send_full_address }}</span>
                        </template>
                    </el-table-column>
                </template>
                <template #action>
                    <el-table-column label="操作" :align="'center'">
                        <template #default="scope">
                            <div style="display: flex; align-items: center;justify-content: center">
                                <el-tooltip class="box-item" effect="dark" content="查看订单" placement="top">
                                    <el-button
                                        type="primary"
                                        size="small"
                                        @click="(infoShow = true), (currentRow = scope.row.order_delivery[0].order_id)"
                                        class="ml-3 w-7 h-7"
                                    >
                                        <Icon name="fa fa-pencil" class="text-white text-lg"></Icon>
                                    </el-button>
                                </el-tooltip>
                                &nbsp;&nbsp;&nbsp;
                                <el-popconfirm
                                    v-if="scope.row.status_name.status == 6"
                                    width="220"
                                    confirm-button-text="确认"
                                    cancel-button-text="取消"
                                    :title="`确定给xxx账号转账xxx元?`"
                                >
                                    <template #reference>
                                        <div>
                                            <span style="color: #4b9cfb">支付宝转账</span>
                                        </div>
                                    </template>
                                </el-popconfirm>
                            </div>
                        </template>
                    </el-table-column>
                </template>
                <template #status>
                    <el-table-column label="订单状态" width="100">
                        <template #default="scope">
                            <span v-if="scope.row.status_name.status == 1" style="color: #f56c6c">{{ scope.row.status_name.name }}</span>
                            <span v-else-if="scope.row.status_name.status == 6" style="color: #67c23a">{{ scope.row.status_name.name }}</span>
                            <span v-else-if="scope.row.status_name.status == 2" style="color: #e6a23c">{{ scope.row.status_name.name }}</span>
                            <span v-else-if="scope.row.status_name.status == 7" style="color: #409eff">{{ scope.row.status_name.name }}</span>
                        </template>
                    </el-table-column>
                </template>
            </Table>
        </div>
        <ShowMdale @update="handleClick()" :modelValue="infoShow" @close="(value: any) => (infoShow = value)" :data="currentRow"></ShowMdale>
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { baTableApi } from '/@/api/common'
import ShowMdale from './popupForm.vue'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import createAxios from '/@/utils/axios'
import { ElMessage } from 'element-plus'

defineOptions({
    name: 'wms/products',
})

const { t } = useI18n()
const tableRef = ref()
let activeName: any = ref('first') //tab切换绑定值
let tabNums = ref({
    onShelfTotal: 0,
    offShelfTotal: 0,
    soldOutTotal: 0,
    finishToatal: 0,
}) //上架中,已下架,已售罄数量
let filterParams: any = ref({
    status: 1, // 0为未上架  1为上架中
    order_no: null, //订单编号
    mobile: null, // 手机号
    nickname: null, // 用户名称
})
let currentRow: any = ref({}) // 当前选择的行数据
let infoShow: any = ref(false) // 控制修改信息的弹层

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(new baTableApi('/admin/order.Order/lists/'), {
    pk: 'id',
    filter: {
        status: '',
    },
    column: [
        // { type: 'selection', align: 'center', operator: false },
        {
            label: '商品信息',
            prop: 'order_goods',
            slotName: 'order_goods',
            render: 'slot',
        },
        { label: '商品规格', prop: 'sku_name', slotName: 'sku_name', render: 'slot', align: 'center' },
        { label: '单价', prop: 'price', slotName: 'price', render: 'slot', align: 'center', width: 150 },
        { label: '数量', prop: 'toatl', slotName: 'total', render: 'slot', align: 'center', width: 150 },
        {
            label: '总价',
            prop: 'goods_money',
            align: 'center',
            width: 110,
        },
        { label: '备注', prop: 'remark', width: 100 },
        { label: '订单信息', prop: 'oederInfo', align: 'center', slotName: 'oederInfo', render: 'slot' },
        { label: '订单状态', prop: 'status_name.name', align: 'center', width: 80, render: 'slot', slotName: 'status' },
        {
            label: t('Operate'),
            align: 'center',
            width: '100',
            render: 'slot',
            slotName: 'action',
            operator: false,
        },
    ],
    dblClickNotEditColumn: [undefined],
})

provide('baTable', baTable)
let filter = ref(baTable.table.filter)
//切换Tab事件
const handleClick = () => {
    filterParams.value.status = null
    if (activeName.value === 'first') {
        filterParams.value.status = ''
    } else if (activeName.value === 'second') {
        filterParams.value.status = 1
    } else if (activeName.value === 'third') {
        filterParams.value.status = 2
    } else if (activeName.value === 'four') {
        filterParams.value.status = 6
    }
    filter.value!.status = filterParams.value.status
    baTable.getIndex()?.then(() => {
        tabNums.value = {
            onShelfTotal: baTable.table.allData!.count,
            offShelfTotal: baTable.table.allData!.wait_check,
            soldOutTotal: baTable.table.allData!.wait_consult,
            finishToatal: baTable.table.allData!.finish,
        }
    })
}

//搜索操作
const handleSearch = (type: string) => {
    if (type === 'reset') {
        filterParams.value = {
            status: 1, // 0为未上架  1为上架中
            order_no: null, //订单编号
            mobile: null, // 用户手机号
            nickname: null, // 用户名称
        }
    }
    //赋值给baTable的filter对象

    filter.value!.order_no = filterParams.value.order_no
    filter.value!.mobile = filterParams.value.mobile
    filter.value!.nickname = filterParams.value.nickname
    baTable.getIndex()?.then(() => {
        tabNums.value = {
            onShelfTotal: baTable.table.allData!.count,
            offShelfTotal: baTable.table.allData!.wait_check,
            soldOutTotal: baTable.table.allData!.wait_consult,
            finishToatal: baTable.table.allData!.finish,
        }
    })
}

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
        tabNums.value = {
            onShelfTotal: baTable.table.allData!.count,
            offShelfTotal: baTable.table.allData!.wait_check,
            soldOutTotal: baTable.table.allData!.wait_consult,
            finishToatal: baTable.table.allData!.finish,
        }
    })
})
</script>

<style scoped lang="scss"></style>
